import React, { useEffect, useState } from "react";
import { Button, Table, Tag} from "antd";
import axios from "axios";
import { useNavigate } from "react-router-dom";
export default function AuditList() {
  /* 该页面主要面向于普通编辑 用来查看自己的文章的审核状态 */
  const {username} = JSON.parse(localStorage.getItem("token"));
  const [dataSource, setDataSource] = useState([]);
  const navigate=useNavigate()
  //获取渲染数据
  useEffect(() => {
    const getRightList = async () => {
      const res = await axios.get(
        /* _ne不等于 _lte小于等于 _gt大于 _lt小于 */
        `http://localhost:3000/news?author=${username}&_expand=category`
      );
      setDataSource(res.data.filter((item)=>{
        return item.auditState!=0&&item.publishState!=2&&item.publishState!=3
      }));
    };
    getRightList();
  }, []);

    const getAuditStateStatusTag = (auditState) => {
      if (auditState === 1) {
        return <Tag color="orange">未审核</Tag>;
      } else if (auditState === 2) {
          return <Tag color="green">审核通过</Tag>;
      } else if(auditState===3) {
        return <Tag color="red">审核不通过</Tag>;
      } 
    };

  const columns = [
    {
      title: "新闻标题",
      dataIndex: "title",
      render:(title,item)=>{
        return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
      }
    },
    {
      title: "作者",
      dataIndex: "author",
    },
    {
      title: "新闻分类",
      dataIndex: "category",
      key: "category",
      render: (category) => {
        return <div>{category.title}</div>;
      },
    },
    {
      title:'审核状态',
      render:(item)=>{
        return getAuditStateStatusTag(item.auditState)
      }
    },
    {
      title: "操作",
      render: (item) => {
        // item就是当前行
        return (
          <>
            {
              item.auditState === 1? (
              <Button color="blue"
                onClick={()=>{
                    //移除前端
                   setDataSource(dataSource.filter((data) => data.id !== item.id));
                    // 将新闻放回草稿箱
                   axios.patch(`http://localhost:3000/news/${item.id}`,{auditState:0});
                  }}
              >
                撤销.
              </Button>
              ) : item.auditState === 2 ? 
                (
                <Button color="blue"
                onClick={()=>{
                   setDataSource(dataSource.filter((data) => data.id !== item.id));
                    // 将新闻发布状态改为待发布
                   axios.patch(`http://localhost:3000/news/${item.id}`,{publishState:2,publishTiem:Date.now()}).then(()=>{
                    navigate('/publish-manage/published')
                   });
                }}
                >
                发布
                </Button>
                ):(
                <Button color="blue"
                  onClick={()=>{
                   navigate(`/news-manage/update/${item.id}`)
                  }}
                 >
                  修改
                </Button>
                )
            }
          </>
        );
      },
    },
  ];

  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{
          pageSize: 5,
        }}
        rowKey={(item) => item.id}
      />
    </div>
  );
}

/* 
  publishState=0 未发布 auditState=0 草稿箱中
  publishState=1 待发布 auditState=1 未审核
  publishState=2 已发布 auditState=2 审核通过
  publishState=3 下线 auditState=3 审核未通过
*/